<template>
  <div class="order-content">
    <div class="order-searc">
      <p>
        订单号: <el-input v-model="ordernum" placeholder="订单号"></el-input>
      </p>
      <p>
        收货人: <el-input v-model="consigne" placeholder="收货人"></el-input>
      </p>
      <p>手机号: <el-input v-model="phone" placeholder="手机号"></el-input></p>
      <p>
        订单状态: <el-input v-model="status" placeholder="订单状态"></el-input>
      </p>
      <p
        style="display: flex; width: 100%; line-height: 40px; margin-left: 10px"
      >
        选择时间:
        <!-- format属性：可以设置日期显示前面的显示格式，value-format:设置拿到的值的格式 -->
        <el-date-picker
        format='yyyy-MM-dd HH:mm:ss'
          v-model="datetime"
          value-format='yyyy-MM-dd HH:mm:ss'
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="primary" @click="queryclick">查询</el-button>
      </p>
    </div>

    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-bottom: 10px"
      >
        <el-table-column fixed prop="orderNo" label="订单号" width="150">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="200">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="100">
        </el-table-column>
        <el-table-column prop="consignee" label="收货人" width="100">
        </el-table-column>
        <el-table-column prop="deliverAddress" label="配送地址" width="120">
        </el-table-column>
        <el-table-column prop="deliveryTime" label="送达时间" width="200">
        </el-table-column>
        <el-table-column prop="remarks" label="用户备注" width="100">
        </el-table-column>
        <el-table-column prop="orderAmount" label="订单金额" width="100">
        </el-table-column>
        <el-table-column prop="orderState" label="订单状态" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="click">
              <el-table :data="getdata">
                <el-table-column
                  width="80"
                  property="consignee"
                  label="收货人"
                ></el-table-column>
                <el-table-column
                  width="120"
                  property="deliverAddress"
                  label="收获地址"
                ></el-table-column>
                <el-table-column
                  width="120"
                  property="deliveryTime"
                  label="下单日期"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="orderAmount"
                  label="订单金额"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="orderNo"
                  label="订单号"
                ></el-table-column>
                <el-table-column
                  width="120"
                  property="orderState"
                  label="订单状态"
                ></el-table-column>
                <el-table-column
                  width="120"
                  property="orderTime"
                  label="送达时间"
                ></el-table-column>
                <el-table-column
                  width="120"
                  property="phone"
                  label="联系电话"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="remarks"
                  label="订单备注"
                ></el-table-column>
              </el-table>
              <el-button
                slot="reference"
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
            </el-popover>
            <el-button type="text" size="small" @click="edeitclick(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- @size-change:每页多少条数，
      @current-change:点击第几页数变化时
      :current-page:当前默认显示的页数
      :page-sizes:可以切换每页显示多少条的数组
      :page-size:当前默认显示的条数
      total:数据库的总条数
      layout:控制分页在每个页面的显示顺序，可以删除，可以换位置
       -->
      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="curpage"
        :page-sizes="curpagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 修改资料部分 -->
    <el-dialog title="编辑订单" :visible.sync="dialogFormVisible">
      <div class="edit">
        <p>
          订单号:&emsp;<el-input
            v-model="orderNo"
            autocomplete="off"
          ></el-input>
        </p>
        <p>
          下单时间:
          <el-date-picker
            v-model="orderTime"
            type="datetime"
            placeholder="下单时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </p>
        <p>
          手机号:&emsp;<el-input v-model="phones" autocomplete="off"></el-input>
        </p>
        <p>
          收货人:&emsp;<el-input
            v-model="consignees"
            autocomplete="off"
          ></el-input>
        </p>
        <p>
          送货地址:<el-input
            v-model="deliverAddress"
            autocomplete="off"
          ></el-input>
        </p>
        <p>
          送达时间:<el-date-picker
            v-model="deliveryTime"
            type="datetime"
            placeholder="送达时间"
            align="right"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </p>
        <p>
          备注:&emsp;&emsp;<el-input
            v-model="remarks"
            autocomplete="off"
          ></el-input>
        </p>
        <p>
          订单金额:<el-input
            v-model="orderAmount"
            autocomplete="off"
          ></el-input>
        </p>
        <p>
          订单状态:<el-input v-model="orderState" autocomplete="off"></el-input>
        </p>
      </div>
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="determine">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { oderlist, oderdetail, editorder } from "@/apis/order.js";
import {getYYYYMMDD_HHMMSS,getYYYYMMDD} from '@/utils/utils'
export default {
  data() {
    return {
      total: 0, //总条数
      curpage: 1, //当前默认显示的页数
      pagesize: 5, //当前显示的每页多少条
      curpagesizes: [5, 15, 25, 40], //显示每页多少条的数组
      tableData: [], //商品列表数组

      // 查询订单数据
      ordernum: "", //订单号
      datetime:[], //选中的时间段
      consigne: "", //收货人
      phone: "", //手机号
      status: "", //订单状态
      // 查看详情数据
      getdata: [],
      // 修改数据框的数据
      dialogFormVisible: false,
      orderNo: "", //订单号
      orderTime: "", //下单时间
      phones: "", //电话
      consignees: "", //收货人
      deliverAddress: "", //送货时间
      deliveryTime: "", //送达时间
      remarks: "", //备注
      orderAmount: "", //订单金额
      orderState: "", //订单状态
      // 时间框特殊功能数据
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    // 封装获取列表接口
    getorder() {
      oderlist({
        currentPage: this.curpage,
        pageSize: this.pagesize,
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.total;
        for (const item of res.data.data) {
          let tms = new Date(item.orderTime);
          let gotms = new Date(item.deliveryTime);
         item.orderTime =getYYYYMMDD_HHMMSS(gotms)
            // gotms.getFullYear() +
            // "-" +
            // ((gotms.getMonth() + 1)<10?'0'+(gotms.getMonth() + 1):gotms.getMonth() + 1) +
            // "-" +
            // gotms.getDate()+' '+(gotms.getHours()<10?'0'+gotms.getHours():gotms.getHours())+':'+(gotms.getMinutes()<10?'0'+gotms.getMinutes():gotms.getMinutes())+':'+(gotms.getSeconds()<10?'0'+gotms.getSeconds():gotms.getSeconds());
         item.deliveryTime=getYYYYMMDD_HHMMSS(tms)
            // tms.getFullYear() +
            // "-" +
            // ((tms.getMonth() + 1)<10?'0'+(tms.getMonth() + 1):tms.getMonth() + 1) +
            // "-" +
            // tms.getDate()+' '+(tms.getHours()<10?'0'+tms.getHours():tms.getHours())+':'+(tms.getMinutes()<10?'0'+tms.getMinutes():tms.getMinutes())+':'+(tms.getSeconds()<10?'0'+tms.getSeconds():tms.getSeconds());
        }
      });
    },
    sizechange(newsize) {
      //currentPage分页功能改变时会触发
      this.pagesize = newsize;
      this.getorder();
    },
    pagechange(newchange) {
      //分页功能中选择多少每页多少条触发的函数
      this.curpage = newchange;
      this.getorder();
    },
    // 点击查询时
    queryclick() {
      oderlist({
         currentPage: this.curpage,
          pageSize: this.pagesize,
          orderNo:this.ordernum,
          consignee:this.consigne,
          phone:this.phone,
          orderState:this.status,
          date:JSON.stringify(this.datetime)
          }).then((res)=>{
            this.tableData = res.data.data;
        this.total = res.data.total;
        res.data.data.forEach(element => {
            let tms = new Date(element.orderTime);
          let gotms = new Date(element.deliveryTime);
          element.deliveryTime =getYYYYMMDD_HHMMSS(gotms)
          element.orderTime =getYYYYMMDD_HHMMSS(tms)
        });
          })
    },
    //点击查看详情时
    handleClick(row) {
      oderdetail({ id: row.id }).then((res) => {
        let time = new Date(res.data.data.deliveryTime);
        let intime = new Date(res.data.data.orderTime);
        res.data.data.deliveryTime =getYYYYMMDD(time)
        res.data.data.orderTime =getYYYYMMDD(intime)
        this.getdata = []; //在push前清空数组，避免把之前查看的数据都一起叠加显示
        this.getdata.push(res.data.data);
      });
    },
    // 点击编辑时显示编辑框
    edeitclick(row) {
      (this.dialogFormVisible = true),
        (this.orderNo = row.orderNo),
        (this.consignees = row.consignee),
        (this.orderNo = row.orderNo), //订单号
        (this.orderTime = row.orderTime), //下单时间
        (this.phones = row.phone), //电话
        (this.deliverAddress = row.deliverAddress), //收货人
        (this.deliveryTime = row.deliveryTime), //送达时间
        (this.remarks = row.remarks), //备注
        (this.orderAmount = row.orderAmount), //订单金额
        (this.orderState = row.orderState); //订单状态
      this.ids = row.id;
    },
    // 取消编辑隐藏编辑框
    cancel() {
      this.dialogFormVisible = false;
    },
    // 点击确认编辑时
    determine() {
      this.dialogFormVisible = false;
      let Otime = new Date(this.orderTime);
      let Dtime = new Date(this.deliveryTime);
      // 处理时间格式对接接口
      this.orderTime =getYYYYMMDD_HHMMSS(Otime)
      this.deliveryTime =getYYYYMMDD_HHMMSS(Dtime)
      editorder({
        id: this.ids,
        orderNo: this.orderNo,
        orderTime: this.orderTime,
        phone: this.phones,
        consignee: this.consignees,
        deliverAddress: this.deliverAddress,
        deliveryTime: this.deliveryTime,
        remarks: this.remarks,
        orderAmount: this.orderAmount,
        orderState: this.orderState,
      }).then((res) => {
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: "success",
        });
        this.getorder();
      });
    },
  },
  created() {
    this.getorder();
  },
};
</script>

<style lang="less" scoped>
.order-searc {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  p {
    width: 25%;
    .el-input {
      width: 70%;
      line-height: 40px;
      margin-bottom: 30px;
    }
    .el-button {
      margin-left: 30px;
    }
    .el-table__row {
      height: 30px;
    }
  }
}

.edit > p {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
  line-height: 48px;
}
.edit > p > .el-input {
  width: 50%;
  margin-bottom: 10px;
  margin-right: 1px;
}
</style>